<template>
  <div class="pagin">
    <el-pagination
      :small="small ? true : false"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: ['page', 'size', 'small', 'total'],
  data() {
    return {
      currentPage: this.page || 1, // 默认显示第几页
      pageTotal: this.total || 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pageSizes: [30, 50, 100], // 个数选择器（可修改）
      pageSize: this.size || 30, // 默认每页显示的条数（可修改）
    }
  },

  watch: {
    total(val, old) {
      // console.log('》》》》》》total', val, old);
      this.pageTotal = val
    },
    page(val, old) {
      // console.log('》》》》》》page', val, old);
      this.currentPage = val
    },
  },

  methods: {
    sizeChange(e) {
      this.$emit('sizeChange', e)
    },
    currentChange(e) {
      this.$emit('currentChange', e)
    },
  },
}
</script>

<style lang="scss" scoped>
.pagin {
  padding: 12px 0;
  text-align: center;
}
</style>
